<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="box">
      <qq></qq>
    </div>
    <!-- fu -->
    <template id="box1">
      <div>
        <h1>{{num}}</h1>
        <button @click="add">++</button>
        <nan :obj="obj"></nan>
      </div>
    </template>

    <!-- zi -->
    <template id="box2">
      <div>
        <h1>你好</h1>
        <h3>{{nam}}</h3>
        <h2>{{obj}}</h2>
      </div>
    </template>

    <script>
      //zi
      const two = {
        template: "#box2",
        // 第一种
        //props:["nam"]
        //第二种
        // props:{
        //   //为了验证传递的类型
        //   nam:Number
        // }
        //第三种
        props:{
          nam:{
            //验证类型
            type:String,
            //默认值（应用类型有所不同）
            default:'你好吗'
          },
          obj:{
            type:Object,
            default:()=>{
              return{
                name:"你好"
              } 
              
            }
          }
        }
      };

      //fu
      const ane = {
        template: "#box1",
        //在这给子组件声明
        components: {
          nan: two,
        },
        data() {
          return {
            num: 66,
            obj:{
              name:'张三'
            }
          };
        },
        methods: {
          add() {
            this.num++;
          },
        },
      };

      new Vue({
        el: "#box",
        components: {
          qq: ane,
        },
      });
    </script>
  </body>
</html>
